<template>
  <div id="app">
    <app-header key="header" />
    <keep-alive>
      <router-view data-layout="app-view"> </router-view>
    </keep-alive>

    <app-footer key="footer" />
  </div>
</template>

<script>
import appHeader from "./components/app-header.vue";
import appFooter from "./components/app-footer.vue";

export default {
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },
  data() {
    return {
      transitionName: "slide-left",
    };
  },
  components: {
    appHeader,
    appFooter,
  },
};
</script>
<style lang="scss" scoped></style>
